<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.getSelection()</title>
    <style>
        .leaveMsgArea{
            margin: 0px auto;
            width: 600px;
            height: 200px;
            border: 1px solid gray;
        }
        .face-wrap{
            position: relative;
            width: 600px;
            margin: 0px auto;
        }
        .face-head{
        }
        .face-cont{
            position: absolute;
            width: 200px;
            height: 120px;
            background: #3d3d3d;
            top: 100%;
            display: none;
        }
        .face-img{
            width: 20px; 
            height: 20px;
            margin: 2px;
            cursor: pointer;
        }
        .button-group{
            margin: 0px auto;
            width: 600px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="leaveMsgArea" contenteditable="true" id="leaveMsgArea">测试window.getSelection()
    </div>
    <div class="face-wrap">
        <a class="face-head" id="head" href="javascript:void(0)">表情</a>
        <div class="face-cont" id="cont">

        </div>
    </div>
    <div class="button-group">
        <button type="button" onclick="leaveMsg.getContent(event)" >获取内容</button>
    </div>
    
    <script>

        /*
        *face管理
        */
        var FaceWrap = function(head, cont, opts){
            this.$head = head;
            this.$cont = cont;
            this.data = ['1', '2', '3'];
            var self = this;
            var toggle = false;
            this.onClickHandHandle = function(evt){
                if(!toggle){
                    self.$cont.style.display = 'block';
                    toggle = true;
                }else{
                    self.$cont.style.display = 'none';
                    toggle = false;
                }
                if(opts.onClickHandHandle){
                    opts.onClickHandHandle(toggle);
                }
            }
            this.onChooseImg = opts. onChooseImg || function(){}

            
            this.generalFaceImg();
            this.bind();
        }

        FaceWrap.prototype.generalFaceImg = function(){
            var fragment = document.createDocumentFragment();
            for( var index =0; index < this.data.length; ++index){
                var data = this.data[index];
                var img = document.createElement('img');
                img.setAttribute('src', 'img/' + data + '.png');
                img.setAttribute('data-id', data);
                img.setAttribute('class','face-img');
                fragment.appendChild(img);
            }
            this.$cont.appendChild(fragment);
        }
        FaceWrap.prototype.bind = function(){  
            if(document.attachEvent){
                this.$head.attachEvent('onclick',this.onClickHandHandle);
                this.$cont.attachEvent('onclick',this.onChooseImg);
            }else{       
                this.$head.addEventListener('click',this.onClickHandHandle);
                this.$cont.addEventListener('click',this.onChooseImg);
            }
        }
        FaceWrap.prototype.hide = function(){
            this.onClickHandHandle();
        }


        var SelectionUitls = function(dom){
            this.dom = dom;
            this.cursorIndex;
        }

        SelectionUitls.prototype.insertDomForStandard = function(dom){
            var sel = window.getSelection(); //获取选区集合
            var range = sel.getRangeAt(0); //获取第一个选择
            range.deleteContents(); //删除选区选重的元素
            range.insertNode(dom); //插入元素在选区的首位置
            range = range.cloneRange(); //克隆一个选区
            range.setStartAfter(dom); //设置选区起点光标位置在指定元素的后面
            range.collapse(true);//合并起点、终点光标
            sel.removeAllRanges();//移除所有选区
            sel.addRange(range); //添加一个选区
        }
        SelectionUitls.prototype.insertDomForIe = function(dom){
            this.dom.focus();
            var wrap = document.createElement('div');
            wrap.appendChild(dom);

            document.selection.createRange().pasteHTML(wrap.innerHTML);
        }
        SelectionUitls.prototype.insertDom = function(dom){
            //光标处插入非元素
            if(window.getSelection){
                this.insertDomForStandard(dom);
            }else{
                this.insertDomForIe(dom);
            }
        }
        SelectionUitls.prototype.getContent = function(){
            //获取数据
            var nodes = this.dom.childNodes;
            var datas = [];
            for(var index = 0; index < nodes.length; index ++){
                var node = nodes[index];
                if(node.nodeType == 3){
                    datas.push(node.textContent || node.nodeValue || node.data);
                }else{
                    datas.push('img:' + node.getAttribute('data-id'));
                }
            }
            return datas.join('##');
        }       

        /*
        *留言管理
        */
        var LeaveMsg = function(opts){
            this.opts = opts;
            this.createFaceWrap();
            this.createUitls();
            this.curLocation;
        }
        LeaveMsg.prototype._insertFace = function(id){
            var img = document.createElement('img');
            img.setAttribute('class','face-img');
            img.setAttribute('data-id', id);
            img.src= 'img/' + id + '.jpg';
            this.selectionUitls.insertDom(img);
            this.faceWrap.hide();
        }
        LeaveMsg.prototype.createFaceWrap = function(){
            var self = this;
            var faceOpt = {
                onChooseImg:function(evt){
                    //插入表情，获取位置，获取表情，插入表情
                    var id = (evt.target||evt.srcElement).getAttribute('data-id');
                    self._insertFace(id);
                }
            }
            this.faceWrap = new FaceWrap(this.opts.faceHead, this.opts.faceCont, faceOpt);
        }
        LeaveMsg.prototype.createUitls = function(){
            this.selectionUitls = new SelectionUitls(this.opts.area);
        }
        LeaveMsg.prototype.getContent = function(evt){
            alert( this.selectionUitls.getContent() );
        }

        //初始化
        var leaveMsgArea = document.getElementById('leaveMsgArea');
        var faceHead = document.getElementById('head');
        var faceCont = document.getElementById('cont');

        
        var leaveMsg = new LeaveMsg({
            area: leaveMsgArea,
            faceHead: faceHead,
            faceCont: faceCont
        });

    </script>
</body>
</html>